<template>
  <view class="ui-page-container">
    <view class="opacityStyale">
      <ui-page-scroll
        :isScrollView="isScrollView"
        @scrolls="scroll"
        @scrollBt="scrolltolower"
        :lowerThreshold="lowerThreshold"
      >
        <ui-navbar
          :title="title"
          :placeholder="!props.immersive"
          :safeAreaInsetTop="true"
          :leftIcon="leftIcon || ''"
          v-if="isShowHeader"
          @leftClick="leftClick"
        >
        </ui-navbar>
        <view class="ui-page-body" :style="[bodyStyle]">
          <slot></slot>
          <u-safe-bottom v-if="hideSafeBottom"></u-safe-bottom>
        </view>
        <ui-tabbar
          v-if="isShowTabbar"
          :isShowTabbar="isShowTabbar"
          :immersiveBottom="immersiveBottom"
        />
      </ui-page-scroll>
    </view>

    <bizCommonComponent ref="bizCommonComponentRef" />
  </view>
</template>

<script setup>
import {
  getTabbarHeight,
  getNavbarHeight,
  getPageText,
  getPagePath,
  getPagesConfig,
  isTabBarPage as isTabBar
} from '@/libs/utils/sys'
import { isWechat } from '@/libs/utils/wechat'
import bizCommonComponent from './common.vue'

const props = defineProps({
  // 触底高度
  lowerThreshold: {
    type: Number,
    default: 50
  },
  // 是否开启滚动
  isScrollView: {
    type: Boolean,
    default: false
  },
  // 隐藏头部导航占位符 沉浸式
  immersive: {
    type: Boolean,
    default: false
  },
  // 隐藏底部导航占位符 沉浸式
  immersiveBottom: {
    type: Boolean,
    default: false
  },
  // 是否显示头部导航
  showHeader: {
    type: Boolean,
    default: true
  },
  // 在tabbar 自动隐藏home 按钮
  hideHomeIconInTabbar: {
    type: Boolean,
    default: true
  },
  // 隐藏头部返回首页按钮
  hideHomeIcon: {
    type: Boolean,
    default: true
  },
  // 返回按钮
  headerLeftIcon: {
    type: Boolean,
    default: ''
  },
  // 是否显示返回按钮
  showHeaderLeftIcon: {
    type: Boolean,
    default: null
  },
  // 固定内容高度
  fixedBodyHeight: {
    type: Boolean,
    default: false
  },
  // 显示底部导航 true 显示 false 隐藏  auto 自适应
  showTabbar: {
    type: [Boolean, String],
    default: false
  },
  // 隐藏底部安全区域
  hideSafeBottom: {
    type: Boolean,
    default: false
  }
})

const store = uni.$store('app')

const tabCurrent = computed(() => {
  return store.tabCurrent
})

const leftIcon = computed(() => {
  if (isTabBarPage()) return ''
  let icon = props.headerLeftIcon || showHomeIcon.value ? 'home' : 'arrow-left'
  // #ifndef H5
  return icon
  //#endif

  // #ifdef H5
  return icon == 'home' ? 'arrow-left' : ''
  //#endif
})

const isTabBarPage = () => {
  // #ifdef H5
  return store.tabList.findIndex((v) => v.path_url === getPagePath()) != -1
  //#endif
  return isTabBar()
}

// 是否显示home按钮
const showHomeIcon = computed(() => {
  return (
    !props.hideHomeIcon &&
    !showLeftIcon.value &&
    !(props.hideHomeIconInTabbar && isTabBarPage())
  )
})

const showLeftIcon = computed(() => {
  return isMutilPage.value && props.showHeaderLeftIcon !== false
})

// 页面是是否大于1
const isMutilPage = computed(() => {
  let pages = getCurrentPages()
  return pages.length > 1
})

// 首页取消返回事件
const leftClick = () => {
  if (isShowHeader.value) {
    try {
      uni.navigateBack()
    } catch {
      uni.navigateBack(2)
    }
  }
}

const _isWechat = isWechat()

const winResize = +new Date()

const emits = defineEmits(['scroll', 'scrolltolower'])

const scroll = (evt) => {
  emits('scroll', evt)
}

const scrolltolower = () => {
  emits('scrolltolower')
}

const bodyStyle = computed(() => {
  let h = 0
  // 触发更新
  if (winResize) {
    h = getBodyHeight()
  } else {
    h = getBodyHeight()
  }
  return {
    height: props.fixedBodyHeight ? h : 'auto',
    minHeight: h
  }
})

// 获取页面标题
const title = computed(() => {
  return getPageText()
})

// 是否显示底部导航
const isShowTabbar = computed(() => {
  return (
    props.showTabbar === true ||
    (props.showTabbar === 'auto' && tabCurrent.value !== -1)
  )
})

const navigationStyle = getPagesConfig().style?.navigationStyle

// 是否显示头部导航  && 需要开启自定义导航配置
const isShowHeader = computed(() => {
  return props.showHeader === true && navigationStyle === 'custom'
})

// 获取视图区域高度
const getBodyHeight = (offset = '', _isShowTabbar = isShowTabbar.value) => {
  let { immersive, immersiveBottom } = props
  let systemInfo = uni.getSystemInfoSync()

  let h = getNavbarHeight() || 0
  let h2 = _isShowTabbar ? getTabbarHeight() || 0 : 0
  let px =
    (immersive || !showHeaderFix ? 0 : h) + (immersiveBottom ? 0 : h2) + 1
  let dy_height = systemInfo.screenHeight

  return `calc(${
    _isWechat ? systemInfo.safeArea.height : dy_height
  }px - ${px}px ${offset})`
}

const showHeaderFix = computed(() => {
  /* #ifdef MP-TOUTIAO */
  // 布局权限未下来
  // return false
  /* #endif */
  // eslint-disable-next-line no-unreachable
  return props.showHeader
})

const bizCommonComponentRef = ref()

const getRef = (ref) => {
  return bizCommonComponentRef.value.getRef(ref)
}

defineExpose({
  getRef
})
</script>

<style lang="scss" scoped>
.ui-page-container {
  min-height: 100%;
  width: 100vw;
  background-size: 100% auto;
  background-repeat: no-repeat;
  background-color: #fff;
}
.ui-page-body {
  width: 100%;
  position: relative;
}
</style>
